<template>
  <div class="container">
    <div class="title">
      <div class="status">订单状态</div>
      <div class="inquire">
        <div>?</div>
        <div class="help">帮助和服务</div>
        <div>&lt;&lt;</div>
      </div>
    </div>
    <div class="box">
      <div class="choose">
        <ul class="choose_ul">
          <li class="item">
            <el-form class="form">
              <div class="text">订单查询:</div>
              <el-form-item class="item_form">
                <el-select placeholder="订单编号">
                  <el-option label="区域一" value="shanghai" />
                  <el-option label="区域二" value="beijing" />
                </el-select>
              </el-form-item>
              <el-form-item class="item_form">
                <el-input class="input" />
              </el-form-item>
            </el-form>
          </li>
          <li class="item">
            <div class="block">
              <span class="demonstration">下单时间:</span>
              <el-date-picker
                v-model="value2"
                type="datetimerange"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right"
              />
            </div>
          </li>
          <li class="item">
            <el-form class="form">
              <div class="text">订单查询:</div>
              <el-form-item class="item_form">
                <el-input class="input" placeholder="请输入商品名称" />
              </el-form-item>
              <div class="text ml">订单查询:</div>
              <el-form-item class="item_form">
                <el-select placeholder="订单编号">
                  <el-option label="区域一" value="shanghai" />
                  <el-option label="区域二" value="beijing" />
                </el-select>
              </el-form-item>
              <div class="text ml">订单查询:</div>
              <el-form-item class="item_form">
                <el-select placeholder="订单编号">
                  <el-option label="区域一" value="shanghai" />
                  <el-option label="区域二" value="beijing" />
                </el-select>
              </el-form-item>
            </el-form>
          </li>
          <li class="item">
            <el-form class="form">
              <div class="text">订单查询:</div>
              <el-form-item class="item_form">
                <el-select placeholder="订单编号">
                  <el-option label="区域一" value="shanghai" />
                  <el-option label="区域二" value="beijing" />
                </el-select>
              </el-form-item>
              <div class="text ml">订单查询:</div>
              <el-form-item class="item_form">
                <el-select placeholder="订单编号">
                  <el-option label="区域一" value="shanghai" />
                  <el-option label="区域二" value="beijing" />
                </el-select>
              </el-form-item>
              <div class="text ml">订单查询:</div>
              <el-form-item class="item_form">
                <el-select placeholder="订单编号">
                  <el-option label="区域一" value="shanghai" />
                  <el-option label="区域二" value="beijing" />
                </el-select>
              </el-form-item>
            </el-form>
          </li>
          <li class="item">
            <el-form class="form">
              <div class="text">订单查询:</div>
              <el-form-item class="item_form">
                <el-select placeholder="订单编号">
                  <el-option label="区域一" value="shanghai" />
                  <el-option label="区域二" value="beijing" />
                </el-select>
              </el-form-item>
              <div class="text ml">订单查询:</div>
              <el-form-item class="item_form">
                <el-select placeholder="订单编号">
                  <el-option label="区域一" value="shanghai" />
                  <el-option label="区域二" value="beijing" />
                </el-select>
              </el-form-item>
              <div class="text ml">订单查询:</div>
              <el-form-item class="item_form">
                <el-select placeholder="订单编号">
                  <el-option label="区域一" value="shanghai" />
                  <el-option label="区域二" value="beijing" />
                </el-select>
              </el-form-item>
            </el-form>
          </li>
          <li class="item">
            <el-form class="form">
              <div class="text">订单查询:</div>
              <el-form-item class="item_form">
                <el-select placeholder="订单编号">
                  <el-option label="区域一" value="shanghai" />
                  <el-option label="区域二" value="beijing" />
                </el-select>
              </el-form-item>
              <div class="text ml">订单查询:</div>
              <el-form-item class="item_form">
                <el-select placeholder="订单编号">
                  <el-option label="区域一" value="shanghai" />
                  <el-option label="区域二" value="beijing" />
                </el-select>
              </el-form-item>
            </el-form>
          </li>
        </ul>
        <div class="box_bottom">
          <el-button class="btn c">筛选</el-button>
          <el-button class="btn">导出</el-button>
          <span>查看已导出列表</span>
          <span>重置筛选条件</span>
        </div>
      </div>
      <div class="order_box">
        <div class="order_details">
          <ul class="title_box">
            <li class="details_title">全部</li>
            <li class="details_title">待付款</li>
            <li class="details_title">待发货</li>
            <li class="details_title">已发货</li>
            <li class="details_title">已完成</li>
            <li class="details_title">已关闭</li>
            <li class="details_title">售后中</li>
          </ul>
          <div style="border: 0.5px solid #eee;" />
          <ul class="order_title_box">
            <li class="order_details_title">
              <div class="pl">商品</div>
              <div>单价(元)/数量</div>
            </li>
            <li class="order_details_title">售后</li>
            <li class="order_details_title">买家/收货人</li>
            <li class="order_details_title">配送方式</li>
            <li class="order_details_title">实收金额(元)</li>
            <li class="order_details_title">订单状态</li>
            <li class="order_details_title">操作</li>
          </ul>
          <div style="border: 0.5px solid #eee;" />
          <div class="details_container">
            <div v-for="i of 3" class="item">
              <div class="item_title">
                <div class="title_l">
                  订单号：<span class="pr">E12345646857489765415</span>
                  下单时间：<span class="pr">2020-12-12 20:20:10</span>
                  <span>浏览器</span>
                </div>
                <div class="title_r">
                  <span>查看备注•</span>
                  <span>详情•</span>
                  <span>加星</span>
                </div>
              </div>
              <div v-for="i of 2" class="item_container">
                <ul class="order">
                  <li class="order_item">
                    <div class="order_item_l">
                      <div class="order_img" />
                      <span>测试商品四</span>
                    </div>
                    <div class="order_item_r">
                      <div>1.00</div>
                      <div>1件</div>
                    </div>
                  </li>
                  <li class="order_item" />
                  <li class="order_item">
                    <div>123456789</div>
                    <div>kobebryant</div>
                    <div>132132654</div>
                  </li>
                  <li class="order_item">快递</li>
                  <li class="order_item">
                    <div>1.00</div>
                    <div>修改价格</div>
                  </li>
                  <li class="order_item">等待买家付款</li>
                  <li class="order_item">取消订单</li>
                </ul>
              </div>
            </div>
            <div class="pagination">
              <el-pagination
                background="#eee"
                :current-page="currentPage4"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </div>
        </div>
        <div v-if="false" class="order_none">
          <div class="icon" />
          <div class="look">查看近期30天订单</div>
          <el-button class="btn">马上查看</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 分页
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,

      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime())
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      value2: ''
    }
  },
  methods: {
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }
  }
}
</script>

<style lang="scss" scoped>
	@import './index.scss';
</style>
